<template>
    <div>
        <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/">消息管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>消息列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="tab-nav-bd">
                <span class="title">我的消息</span>
            </div>
        </el-card>
        <div class="mainbox"  style="margin-top: 20px;">
            <ul class="tabs-nav">
                <input type="hidden" name="msgType" id="msgType" value="1">
                <li>
                    <a href="/msg/index_list/index?new=1">官方活动
                    </a>
                </li>
                <li class="active">
                    <a href="/msg/index_list/index?t=1&amp;new=1">系统通知
                    </a>
                </li>
                <li>
                    <a href="/msg/index_list/index?t=3&amp;new=1">问答通知
                    </a>
                </li>
                <li>
                    <a href="/msg/index_list/index?t=4&amp;new=1">我的互动
                    </a>
                </li>
                <li class="li-right">
                    <a href="javascript: " class="inp-click inp-click2"><span
                            class="over-text">全选</span></a>
                    <a href="javascript: " class="removeOver"><span></span>删除</a>
                    <a href="javascript: " class="jsReadAll">全部已读</a>
                </li>

            </ul>

            <ul class="msg">
                <li>
                    <a href="/msg/index_list/index?t=1&amp;isRead=0&amp;new=1" class="msg-all active">
                        全部(2)
                    </a>
                    <a href="/msg/index_list/index?t=1&amp;isRead=1&amp;new=1" class="msg-unread">
                        未读(<span>0</span>)
                    </a>
                </li>
                <li class="clearfix js-user-msg  have-read" data-id="80064922" data-read="1">
                    <span class="span-input span-input2" data-id="80064922"></span>
                    <!-- <img src="https://static.3d66.com/user/images/defaultHead.jpg" alt=""> -->
                    <div class="msg-icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-nav_information_pop_icon_my_interaction"></use>
                        </svg>
                    </div>
                    <div class="msg-list-item-text msgId80064922">
                        <p>
                            尊敬的3D66用户,您有一张券:【新用户课程首单立减10元】即将到期,<a
                                href="https://user.3d66.com/coupon/index/index">请尽快使用&gt;&gt;</a>
                        </p>
                        <span>
                            2024-09-09 00:31:16 </span>
                    </div>
                    <svg class="icon js-more-msg" aria-hidden="true">
                        <use xlink:href="#icon-homepage_icon_Showarrowsbelow"></use>
                    </svg>
                    <em class="msg-list-item-delete"></em>
                </li>
                <li class="clearfix js-user-msg  have-read" data-id="79995902" data-read="1">
                    <span class="span-input span-input2" data-id="79995902"></span>
                    <!-- <img src="https://static.3d66.com/user/images/defaultHead.jpg" alt=""> -->
                    <div class="msg-icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-nav_information_pop_icon_my_interaction"></use>
                        </svg>
                    </div>
                    <div class="msg-list-item-text msgId79995902">
                        <p>
                            尊敬的3D66用户，送你一张自学课程优惠券：新用户课程首单立减10元，请尽快使用！
                        </p>
                        <span>
                            2024-09-04 09:33:34 </span>
                    </div>
                    <svg class="icon js-more-msg" aria-hidden="true">
                        <use xlink:href="#icon-homepage_icon_Showarrowsbelow"></use>
                    </svg>
                    <em class="msg-list-item-delete"></em>
                </li>
                <!--            <span></span>-->
            </ul>
        </div>
    </div>
</template>
<style scoped>
.tab-nav-bd {
    margin-top: 16px;
}

.tab-nav-bd .title {
    font-size: 18px;
    font-weight: 700;
    color: #1D2129;
    line-height: 26px;
}
.mainbox {
    padding: 18px 24px 24px 6px;
    padding-top: 18px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 6px;
}
.mainbox {
    margin-left: 0;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 10px;
}
.tabs-nav {
    margin: 0 0 16px;
    border-color: #F2F3F5;
    border-bottom: solid 1px #e8e8e8;
    zoom: 1;
}
.tabs-nav li {
    margin: 0 18px;
    padding: 0 0 10px;
    line-height: 1;
}
.tabs-nav li {
    float: left;
    margin: 0 15px -1px 15px;
    line-height: 40px;
    padding: 0 4px;
    border-bottom: solid 2px transparent;
    font-size: 16px;
    color: #666;
}
.tabs-nav li a, .tabs-nav li span {
    color: #4E5969;
    line-height: 22px;
}
.tabs-nav li a {
    position: relative;
}
.tabs-nav .active {
    color: #06CD65;
    border-width: 3px;
    border-color: #06CD65;
}
.tabs-nav .li-right {
    float: right;
}
.tabs-nav:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.msg li:hover {
    background-color: #F2F3F5;
}
.msg li {
    margin-top: 8px;
    padding: 8px 24px;
    border-bottom: none;
}
.msg li .msg-all {
    color: #4E5969;
    line-height: 22px;
}

.msg li .msg-all {
    font-size: 14px;
    color: #999;
}
.msg li .active, .msg li .active>span {
    color: #06CD65;
}
.msg li .msg-unread {
    font-size: 14px;
    color: #999;
    font-weight: bold;
    margin-left: 25px;
}
.tabs-nav .over-input {
    background: #fff;
    border-radius: 50%;
    border: 1px solid #4E5969;
}
.tabs-nav .over-input {
    position: relative;
    top: 2px;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    background-size: 100% 100%;
}
.tabs-nav li a, .tabs-nav li span {
    color: #4E5969;
    line-height: 22px;
}
.tabs-nav .li-right a {
    margin-left: 20px;
}
.msg .develop-more-msg .msg-list-item-text p {
    white-space: normal;
}

.msg li .msg-list-item-text p {
    margin-bottom: 8px;
    font-size: 16px;
    color: #1D2129;
    line-height: 24px;
}
.msg li .msg-list-item-text span {
    color: #C9CDD4;
    line-height: 24px;
}
</style>